<template>
	<view class="warp">
		<view class="card" v-for="(item, index) in list" :key="index">
			<view class="u-flex u-row-between">
				<view class="title"><text class="red">{{item.name}}</text>{{item.loadName}}</view>
				<view class="u-flex">
					<u-button shape="circle" :customStyle="upOrDownBtnCustomStyle" :text="item.title"
						@click="upOrDown(item.show,index)"></u-button>
					<view style="width: 10rpx;"></view>
					<u-button shape="circle" :customStyle="editBtnCustomStyle" text="编辑"
						@click="edit(index)"></u-button>
				</view>
			</view>
			<view class="body">
				<view class="u-m-t-10">{{item.titleOne}}</view>
				<view class="u-m-t-10" v-if="item.warnStock != null && item.warnStock >= 0">当前小于或等于{{item.warnStock}}个库存时触发预警。</view>
        <view class="u-m-t-10" v-else>{{item.titleTwo}}</view>
				<view class="store" v-show="item.show" v-for="(data, ind) in item.child" :key="ind">
					{{data.storeName}}_{{data.deviceNo}}
				</view>
			</view>
		</view>

		<u-popup :show="show" @close="close()" mode="right">
			<view class="right-popup">
				<view class="title-right">按<text class="red">{{rightTitleRed}}</text>{{rightTitle}}</view>
				<view class="u-flex u-row-between u-m-t-60">
					<view>库存通知</view>
					<u-number-box :min="0" :max="999" v-model="params.warnStock" @change="valChange"></u-number-box>
				</view>
				<scroll-view :style="{ height: height + 'px'}" scroll-y="true" :scroll-with-animation="true"
					:enable-back-to-top="true">
					<view class="u-m-t-45">
						<view>未通知设备</view>
						<u-row customStyle="margin-top: 15rpx;margin-left:10rpx" gutter="10" justify="between"
							v-for="(item, index) in listDefault" :key="index">
							<u-col span="8">
								<view class="store-right">{{item.storeName}}_{{item.deviceNo}}</view>
							</u-col>
							<u-col span="4" text-align="center">
								<u-button shape="circle" :customStyle="upOrDownBtnCustomStyle" text="新增"
									@click="insertTemporaryData(index,item)"></u-button>
							</u-col>
						</u-row>
					</view>
					<view class="u-m-t-45">
						<view>已通知设备</view>
						<u-row customStyle="margin-top: 15rpx;margin-left:10rpx" gutter="10" justify="between"
							v-for="(item, index) in temporaryList" :key="index">
							<u-col span="8">
								<view class="store-right">{{item.storeName}}_{{item.deviceNo}}</view>
							</u-col>
							<u-col span="4" text-align="center">
								<u-button shape="circle" :customStyle="editBtnCustomStyle" text="解除"
									@click="relieve(index,item)"></u-button>
							</u-col>
						</u-row>
					</view>
				</scroll-view>
				<view class="btn">
					<u-button shape="circle" :customStyle="saveBtnCustomStyle" text="保存" @click="save()"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				upOrDownBtnCustomStyle: {
					width: '130rpx',
					height: '50rpx',
					background: '#6072FF',
					borderRadius: '10rpx',
					color: '#fff',
				},
				editBtnCustomStyle: {
					width: '130rpx',
					height: '50rpx',
					background: '#F9AE3D',
					borderRadius: '10rpx',
					color: '#fff',
				},
				saveBtnCustomStyle: {
					width: '300rpx',
					height: '88rpx',
					background: '#6072FF',
					borderRadius: '120rpx',
					color: '#fff',
				},
				rightTitleRed: '',
				rightTitle: '',
				rightList: '',
				show: false,
				params: {
					type: '',
					warnStock: 0,
					newPushConfigItemList: [],
				},
				init: {
					//未通知的设备
					notNotifiedDeviceList: [],
				},
				//临时集合 未通知的设备
				listDefault: [],
				//临时集合 已通知的设备
				temporaryList: [],
				stockList: [],
				height: 550,
				list: [{
						type: 1,
						name: '整机分类',
						loadName: '库存预警通知',
						titleOne: '适合商品种类少的设备使用，',
						titleTwo: '当前小于或等于 xx 个库存时触发预警。',
						titleThree: '',
						show: true,
						warnStock: '',
						title: '折叠',
						child: [],
					},
					{
						type: 2,
						name: '整机',
						loadName: '总库存预警通知',
						titleOne: '适合1种商品的设备使用，',
						titleTwo: '当前小于或等于 xx 个库存时触发预警。',
						titleThree: '',
						show: true,
						warnStock: '',
						title: '折叠',
						child: [],
					},
					{
						type: 3,
						name: '货道',
						loadName: '库存预警通知',
						titleOne: '适合多种商品的设备使用，',
						titleTwo: '当前小于或等于 xx 个库存时触发预警。',
						titleThree: '',
						show: true,
						warnStock: '',
						title: '折叠',
						child: [],
					}
				]
			};
		},
		onLoad() {
			this.findPushConfigStockDeviceNo();
		},
		methods: {
			//保存
			save() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				this.params.newPushConfigItemList = this.temporaryList;
				console.log(this.params, 'params')
				this.$api('pushConfigStock.editPushConfigStockItem', this.params).then(res => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if (res.status == 0) {
						this.$helpers.toast('保存成功');
						this.findPushConfigStockDeviceNo();
						this.show = false;
					} else {
						getApp().err('请求数据不成功：' + res.msg);
					}
				})
			},
			//把未绑定的设备号，新增到临时集合
			insertTemporaryData(index, data) {
				try {
					//根据坐标移除集合某条数据
					this.listDefault.splice(index, 1)
					//把新增的设备数据，添加到临时集合的第一条数据
					this.temporaryList.unshift(data)
				} catch (e) {
					console.error(e.toString())
				}
			},
			//解除设备通知
			relieve(index, data) {
				try {
					//根据坐标移除临时集合某条数据
					this.temporaryList.splice(index, 1)
					//把新增的设备数据，添加到未通知集合的第一条数据
					this.listDefault.unshift(data)
				} catch (e) {
					console.error(e.toString())
				}
			},
			upOrDown(show, index) {
				this.list[index].show = !show
				if (show) {
					this.list[index].title = '展开'
				} else {
					this.list[index].title = '折叠'
				}
			},
			edit(index) {
				this.rightTitleRed = this.list[index].name
				this.rightTitle = this.list[index].loadName
        this.params.warnStock = this.list[index].warnStock
				this.show = true
				this.params.type = index + 1

				this.temporaryList = []
				this.listDefault = []
				this.temporaryList = JSON.parse(JSON.stringify(this.list[index].child));
				this.listDefault = JSON.parse(JSON.stringify(this.init.notNotifiedDeviceList));
			},
			close() {
				this.show = false
			},
			findPushConfigStockDeviceNo() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('pushConfigStock.findPushConfigStockDeviceNo').then(res => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if (res.status == 0) {
						this.init.notNotifiedDeviceList = JSON.parse(JSON.stringify(res.data.listDefault));
						this.listDefault = JSON.parse(JSON.stringify(res.data.listDefault));
            this.temporaryList = JSON.parse(JSON.stringify(res.data.listAll));
            this.stockList = res.data.stockList
            console.log(this.stockList)
            this.list.forEach(item => {
              this.stockList.forEach(data => {
                  if(item.type == data.type){
                    item.warnStock = data.warnStock
                  }
              })
            })
            this.list[0].child = res.data.listOne;
            this.list[1].child = res.data.listTwo;
            this.list[2].child = res.data.listThree;
						console.log(this.list,'this.list')
					} else {
						getApp().err('请求数据不成功：' + res.msg);
					}
				})
			},
			valChange() {

			}
		}
	}
</script>

<style lang="scss">
	.warp {
		.red {
			color: rgb(246, 8, 8);
		}

		.title {
			font-size: 28rpx;
			color: rgb(0, 0, 0);
		}

		.card {
			margin-top: 26rpx;
			background-color: white;
			padding: 40rpx 30rpx;
		}

		.body {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.7);
		}

		.store {
			background: rgb(244, 250, 255);
			border-radius: 20rpx;
			padding: 26rpx;
			margin-top: 28rpx;
		}

		.right-popup {
			padding: 26rpx;
			width: 430rpx;
			color: rgba(0, 0, 0, 0.9);
			font-size: 26rpx;

			.title-right {
				text-align: center;
			}

			.store-right {
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.7);
			}

			.btn {
				position: fixed;
				bottom: 30rpx;
				right: 90rpx;
			}
		}
	}
</style>
